<template>
  <div class="tabbar">
    <van-tabbar v-model="active1" active-color="#f00">
      <van-tabbar-item to="/home" icon="wap-home">主页</van-tabbar-item>
      <van-tabbar-item to="/category" icon="expand">分类</van-tabbar-item>
      <van-tabbar-item to="/shop" icon="shopping-cart">购物车</van-tabbar-item>
      <van-tabbar-item to="/my" icon="manager">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script setup name="Tabbar">
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";
const active1 = ref(0);
const route = useRoute();
onMounted(() => {
  switch (route.path) {
    case "/home":
      return (active1.value = 0);
    case "/my":
      return (active1.value = 3);
    case "/shop":
      return (active1.value = 2);
    case "/category":
      return (active1.value = 1);
    default:
      return (active1.value = 0);
  }
});
</script>
<style>
</style>
